<template>
  <edit-layout ref="layout" :page="page" :form="form" @invoke="invoke">
    <el-form
      ref="form"
      :model="form"
      :size="page.settings.formSize"
      :label-width="page.settings.labelWidth"
    >
      <el-divider content-position="left">基础信息</el-divider>
      <el-form-item v-if="!form.id" label="驾驶员账号" prop="empId" :rules="page.rules.def">
        <form-remote-select
          v-model="form.empId"
          :url="$http.conf.api.get('wms').url+'/api/logistics/driver/findEmpMap'"
          @change="driverChange"
        />
      </el-form-item>
      <!-- <formSelect
        v-if="!form.id"
        v-model="form.empId"
        lable="驾驶员账号"
        :duty-id="$store.state.settings.wmsConf.logistics.dutyId[1]"
        :rules="page.rules.def"
        placeholder="请输入驾驶员账号"
        @change="driverChange"
      /> -->
      <el-form-item v-if="form.id==null" label="驾驶员" prop="realName">
        <el-input v-if="form.id==null" v-model="form.realName" class="col" placeholder="请输入真实姓名" disabled />
      </el-form-item>
      <el-form-item v-else label="驾驶员" prop="realName">
        <label v-if="form.shiroUser==null" style="color: #1890ff;">{{ form.realName }}</label>
        <employee-card v-model="form.shiroUser" />
      </el-form-item>
      <el-form-item v-if="form.id==null && form.phone" label="手机号码" prop="phone">
        <el-input v-model="form.phone" class="col" placeholder="手机号码" disabled />
      </el-form-item>
      <el-form-item label="驾驶证" prop="drivingLicence" :rules="page.rules.def">
        <img v-if="form.drivingLicence" :src="form.drivingLicence" width="60" height="60">
        <form-upload-image v-model="form.drivingLicence" size="mini" :remote="upload.img" />
      </el-form-item>
      <el-form-item label="驾驶证有效期" prop="drivingLicenceIndate" :rules="page.rules.def">
        <el-date-picker
          v-model="form.drivingLicenceIndate"
          value-format="yyyy-MM-dd"
          type="date"
          size="mini"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item label="驾驶证号" prop="drivingLicenceNo">
        <el-input v-model="form.drivingLicenceNo" class="col" placeholder="驾驶证号" />
      </el-form-item>

      <!-- 编辑状态 -->
      <div v-if="form.id">
        <el-divider content-position="left">状态信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="used">
              <el-tag v-if="form.used=='Y'" type="success">已启用</el-tag>
              <el-tag v-else-if="form.used=='N'" type="danger">未启用</el-tag>
              <el-tag v-else-if="form.used=='W'" type="warning">待处理</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绑定状态" prop="isBind">
              <el-tag v-if="form.isBind==1" type="success">已绑定</el-tag>
              <el-tag v-if="form.isBind==0" type="danger">未绑定</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="createTime">
              <label>{{ form.createTime }}</label>
              <!-- <el-input v-model="form.createTime" placeholder="创建时间" disabled /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改时间" prop="updateTime">
              <label>{{ form.updateTime }}</label>
              <!-- <el-input v-model="form.updateTime" placeholder="修改时间" disabled /> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人" prop="creator">
              <label>{{ form.creator }}</label>
              <!-- <el-input v-model="form.creator" placeholder="创建人" disabled /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改人" prop="updator">
              <label>{{ form.updator }}</label>
              <!-- <el-input v-model="form.updator" placeholder="修改人" disabled /> -->
            </el-form-item>
          </el-col>
        </el-row>

      </div>
      <!-- 已绑定状态 -->
      <div v-if="form.isBind==1">
        <el-divider content-position="left">车辆信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="绑定车辆" prop="carName">
              <el-input v-model="form.carName" class="col" placeholder="绑定车辆" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号" prop="carNo">
              <el-input v-model="form.carNo" class="col" placeholder="车牌号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" class="col" placeholder="备注" />
      </el-form-item>
    </el-form>
  </edit-layout>
</template>
<script>
import adminSupport from 'lola-admin-support-el'
// import formSelect from '@/components/formSelect'

export default {
  name: 'PersonnelEdit',
  // components: { formSelect },
  mixins: [adminSupport.mixins.edit],
  data() {
    return {
      name: 'Personnel'
    }
  },
  mounted() {
    this.page.tip = '请选择驾驶员账号，绑定后将不可修改!'
    this.init() // 初始化
  },
  methods: {
    init() {
      const that = this
      that.page.ids.push(this.$route.params.no) // 页面主参数赋值
      that.loadData() // 加载数据
    },
    appendForm() {
      const roleIds = []
      if (this.form.roles != null) {
        this.form.roles.forEach(item => {
          roleIds.push(item.id)
        })
      }
      this.form.roleIds = roleIds
    },
    buildForm() {
      return true
    },
    // 驾驶员选择改变事件
    driverChange(val) {
      console.log(val)
      const arr = val.val.split(',')
      this.form.realName = arr[0]
      this.form.phone = arr[1]
      this.form.username = val.name
    }
  }
}
</script>
